<template>
  <div style="margin-top: 20px;height: 2000px">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="echarts">
          <Echarts1 ref="echarts1Ref"/>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="echarts">
          <Echarts2 ref="echarts2Ref"/>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="echarts">
          <Echarts3 ref="echarts3Ref"/>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="echarts">
        <Echarts4 ref="echarts4Ref"/>
      </div>
    </el-row>


    <div style="margin-top: 20px" >

        <el-row type="flex" style="padding-left: 10px" justify="space-between">
        <el-col :span="5">
          <span style="font-size: 19px;font-weight:  600;color: rgba( 0 0 0 / 0.75)">任务完成数：</span>
        </el-col>
        <el-col :span="5"  style="display: flex;align-items: center;" >
          <span style="font-size: 16px">周筛选：</span>
          <el-date-picker
            v-model="taskDate"
            type="week"
            @change="queryEcharts5"
            value-format="yyyy-MM-dd"
            format="yyyy 第 WW 周"
            placeholder="选择周">
          </el-date-picker>
        </el-col>
        </el-row>


      <el-col class="echarts" style="height:600px;">
        <Echarts5 ref="echarts5Ref"/>
      </el-col>
    </div>

    <div style="margin-top: 20px" >

      <el-row type="flex" style="padding-left: 10px" justify="space-between">
        <el-col :span="5">
          <span style="font-size: 19px;font-weight:  600;color: rgba( 0 0 0 / 0.75)">问题反馈数量：</span>
        </el-col>
        <el-col :span="5"  style="display: flex;align-items: center;" >
          <span style="font-size: 16px">周筛选：</span>
          <el-date-picker
            v-model="date"
            type="week"
            @change="queryEcharts6"
            value-format="yyyy-MM-dd"
            format="yyyy 第 WW 周"
            placeholder="选择周">
          </el-date-picker>
        </el-col>
      </el-row>


      <el-col class="echarts" style="height:500px;">
        <Echarts6 ref="echarts6Ref"/>
      </el-col>
    </div>

  </div>
</template>

<script>
import Echarts1 from "@/views/project/projectList/info/components/summarize/components/Echarts1.vue";
import Echarts2 from "@/views/project/projectList/info/components/summarize/components/Echarts2.vue";
import Echarts3 from "@/views/project/projectList/info/components/summarize/components/Echarts3.vue";
import Echarts4 from "@/views/project/projectList/info/components/summarize/components/Echarts4.vue";
import Echarts6 from "@/views/project/projectList/info/components/summarize/components/Echarts6.vue";
import Echarts5 from "@/views/project/projectList/info/components/summarize/components/Echarts5.vue";

export default {
  props: ["id"],
  name: "index",
  data() {
    return {
      date: '',
      taskDate:''
    }
  },
  components: {
    Echarts1,
    Echarts2,
    Echarts3,
    Echarts4,
    Echarts6,
    Echarts5
  },
  mounted() {
    if (this.id) {
      this.queryEcharts1()
      this.queryEcharts2()
      this.queryEcharts3()
      this.queryEcharts4()
      this.queryEcharts5()
      this.queryEcharts6()

    } else
      this.$message.error("项目id丢失")
  },
  methods: {
    async queryEcharts1() {
      const res = await this.$http.get(`/projects/${this.id}/work_day`)
      res.data.success ? this.$refs.echarts1Ref.setEChartsOptions(res.data.data) : this.$message.error(res.data.msg)
    },
    async queryEcharts2() {
      const res = await this.$http.get(`/projects/${this.id}/total_task`)
      res.data.success ? this.$refs.echarts2Ref.setEChartsOptions(res.data.data) : this.$message.error(res.data.msg)
    },
    async queryEcharts3() {
      const res = await this.$http.get(`/projects/${this.id}/schedule_total_task`)
      res.data.success ? this.$refs.echarts3Ref.setEChartsOptions(res.data.data) : this.$message.error(res.data.msg)
    },
    async queryEcharts4() {
      const res = await this.$http.get(`/projects/${this.id}/burn_down`)
      res.data.success ? this.$refs.echarts4Ref.setEChartsOptions(res.data.data) : this.$message.error(res.data.msg)
    },
    async queryEcharts5() {
      const res = await this.$http.get(`/projects/${this.id}/task_complete_counts`,{ params: { date:this.taskDate} })
      res.data.success ? this.$refs.echarts5Ref.setEChartsOptions(res.data.data) : this.$message.error(res.data.msg)
      // this.$refs.echarts5Ref.setEChartsOptions()
    },
    async queryEcharts6() {
      const res = await this.$http.get(`/reports/suggest`,{ params: { project_id: this.id ,date:this.date}})
      res.data.success ? this.$refs.echarts6Ref.setEChartsOptions(res.data.data) : this.$message.error(res.data.msg)
    },
  },
}
</script>

<style scoped>
.echarts {
  height: 400px;
}
</style>
